<script setup lang="ts">
import { useHome } from "@/views/home/hook.tsx";
import { ControlOutlined, RedoOutlined } from "@ant-design/icons-vue";
import { h } from "vue";
import HomeAddIndexView from "@/views/home/components/addIndex/index.vue";
import HomeCardsView from "@/views/home/components/cards/index.vue";

defineOptions({
	name: "HomeView",
});
const {
	value,
	loading,
	sortValue,
	sortOptions,
	filterValue,
	filterOptions,
	esIndexInfos,
	current,
	total,
	pageSize,
	selectAllStatus,
	cancelAllStatus,
	allowOperations,
	onSearch,
	onSortChange,
	onStatusChange,
	onPaginationChange,
	handleRefresh,
	cardWidth,
	homeBody,
	handleSelectAll,
	checkboxChange,
	handleCancelAll,
	handleDeleteSelectedIndex,
	handleCloseSelectedIndex,
	handleOpenSelectedIndex,
} = useHome();
</script>

<template>
	<div class="home-view animate__animated animate__fadeIn">
		<div class="home-header">
			<a-input
				v-model:value="value"
				:bordered="false"
				size="large"
				placeholder="请输入索引或者别名的名称"
				style="width: 390px"
				allowClear
				@change="onSearch"
			/>
			<div class="home-header-function animate__animated animate__fadeIn" v-if="selectAllStatus" />
			<div class="home-header-operation">
				<a-select v-model:value="sortValue" style="width: 99px" :options="sortOptions" @change="onSortChange" />
				<a-select v-model:value="filterValue" style="width: 99px" :options="filterOptions" @change="onStatusChange" />
				<a-dropdown placement="bottom">
					<a-button type="dashed" :icon="h(ControlOutlined)" />
					<template #overlay>
						<a-menu>
							<a-menu-item :disabled="selectAllStatus">
								<a href="javascript:;" @click="handleSelectAll">全部选中</a>
							</a-menu-item>
							<a-menu-item :disabled="cancelAllStatus">
								<a href="javascript:;" @click="handleCancelAll">全部取消</a>
							</a-menu-item>
							<a-menu-item :disabled="allowOperations">
								<a href="javascript:;" @click="handleOpenSelectedIndex">打开索引</a>
							</a-menu-item>
							<a-menu-item :disabled="allowOperations">
								<a href="javascript:;" @click="handleCloseSelectedIndex">关闭索引</a>
							</a-menu-item>
							<a-menu-item :disabled="allowOperations">
								<a href="javascript:;" @click="handleDeleteSelectedIndex">删除索引</a>
							</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
				<home-add-index-view @create-index="handleRefresh" />
				<a-tooltip title="刷新索引信息" placement="bottom" color="cyan">
					<a-button type="dashed" :icon="h(RedoOutlined)" @click="handleRefresh" />
				</a-tooltip>
			</div>
		</div>
		<div class="home-body" ref="homeBody">
			<a-flex wrap="wrap" gap="small" v-if="esIndexInfos && esIndexInfos.length > 0">
				<home-cards-view
					class="animate__animated animate__fadeIn"
					:card-width="cardWidth"
					:es-index-infos="esIndexInfos"
					@delete-index="handleRefresh"
					@checkbox-change="checkboxChange"
				/>
			</a-flex>
			<div class="home-body-empty" v-else-if="!loading"><a-empty /></div>
		</div>
		<div class="home-footer" v-if="total > pageSize">
			<a-pagination
				v-model:current="current"
				show-quick-jumper
				:total="total"
				:page-size="pageSize"
				@change="onPaginationChange"
				:hide-on-single-page="true"
			/>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.home-view {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 100%;
	// 添加这个，使滚动条在里面
	max-height: 100%;
}

.home-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 100;
	align-items: center;
	padding: 15px 0;
	background-color: var(--home-bg-color);
}
.home-header-function {
	flex: 1;
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	padding-right: 10px;
	padding-left: 10px;
}
.home-header-operation {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.home-body {
	width: 100%;
	flex: 1;
	// 添加这个，使滚动条在里面
	overflow: auto;
}
.home-body-empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 200px);
}

.home-footer {
	width: 100%;
	height: 60px;
	max-height: 60px;
	min-height: 60px;
	line-height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: sticky;
	bottom: 0;
	background-color: var(--home-bg-color);
}
</style>
